<template>
	<view>
		<page-head headTitle="预约" :returnButton="true" @clickLeftReturn="clickLeftReturn"></page-head>
		<view class="m-t9">
			<view class="public-bg">
				<view class="flex justify-content p-t-3 p-t2">
					<image src="/static/images/picture.png" class="book-pic"></image>
				</view>
				<text class="flex justify-content fs-3">{{info.name}} 陪同服务</text>
			</view>
			<view class="bg-white">
				<view class="p-l-r">
					<view class="flex height-nav justify-between align-center border-botton ">
						<text class="fs-3">开始时间</text>
						<view class="input-goods flex align-center justify-content">
							<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
								<view class="input-goods fs-3 m-r">{{date}}</view>
							</picker>
							<image src="/static/images/icon_right_arrow.png" class="right-arrow"></image>
						</view>
					</view>
					<view class="flex height-nav justify-between align-center border-botton ">
						<text class="fs-3">结束时间</text>
						<view class="input-goods flex align-center justify-content">
							<picker mode="date" :value="dateEnd" :start="startDate" :end="endDate" @change="bindDateChangeEnd">
								<view class="input-goods fs-3 m-r">{{dateEnd}}</view>
							</picker>
							<image src="/static/images/icon_right_arrow.png" class="right-arrow"></image>
						</view>
					</view>
					<view class="flex height-nav justify-between align-center border-botton ">
						<text class="fs-3 letter-s3">人数</text>
						<view class="input-goods flex align-center justify-content">
							<!-- <text class="fs-3 p-r1">2</text> -->
							<input class="flex fs-3 info white-space" type="number" @input="oninput" v-model="people"  style="text-align: right;" placeholder-class="text">
						</view>
					</view>
					<view class="flex justify-between p-t-b3">
						<text class="fs-3 letter-s3">备注</text>
						<view class="input-goods flex align-center justify-content flex-1">
							<textarea class="textarea width" placeholder-class="fs-2"  v-model="remark" placeholder="如果有其他要求，请在此输入..."/>
						</view>
					</view>
				</view>
			</view>
			<bright-button title="立即预约" @licekSubmit="licekSubmit" class="m-t-b"></bright-button>
		</view>
	</view>
</template>

<script>
import pageHead from '@/components/common/page-head.vue'
import brightButton from '@/components/common/bright-button.vue'
	export default {
		components:{
			pageHead,
			brightButton
		},
		data() {
			// const currentDate = this.getDate({
			//             format: true
			// });
			// const currentDateEnd = this.getDate({
			//             format: true
			// });
			return {
				date: "选择开始时间",
				dateEnd: "选择结束时间",
				info:{},
				people:"",
				remark:"",
			}
		},
		onLoad(e) {
			this.guideId = e.id;
			this.getDetail();
		},
		computed: {
			 startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			clickLeftReturn(){
				const pages = getCurrentPages() ;
				if(pages.length >1) {
					uni.navigateBack({
						delta: 1
					});
				}else{
					//返回上一页失败后强制回到首页
					uni.redirectTo({
						url: '../index/index'
					})
				}
			},
			bindDateChange: function(e) {
			    this.date = e.target.value;
			},
			bindDateChangeEnd: function(e) {
				this.dateEnd = e.target.value;
			},
			oninput(e){
				this.$nextTick(() => {
				          let val = e.target.value.toString();
				          val = val.replace(/[^\d]/g, ""); //清除"数字"以外的字符
						  val = val.replace(/^0/g, '');
				          this.people = val;
				        });
			},
			//获取导游信息
			getDetail(){
				this.$myRequest({
					method:'POST',
					url:'/api/guide/detail',
					data:{
						id:this.guideId,
					},
				}).then(res=>{
					if(res.data.code == 1){
						var resultData = res.data.data;
						this.info = resultData.guide
					}
				})
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
	
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year+'年'}${month+'月'}${day+'日'}`;
			},
			licekSubmit(){
				var people = Number(this.people);
				console.log(this.remark);
				this.$myRequest({
					method:'POST',
					url:'/api/reservation/submit',
					data:{
						id:this.guideId,
						start_date:this.date,
						end_date:this.dateEnd,
						qty_people:people,
						remark:this.remark
					},
				}).then(res=>{console.log(res);
					if(res.data.code == 1){
						uni.reLaunch({
							url: '../booking-order/booking-order'
						})
					}else{
						this.showMessage(res.data.msg);
					}
					
				});
			},
			showMessage(title){
				uni.showToast({
				    title: title,
				    duration: 3000,
					icon:"none",
				});
			}
		}
	}
</script>

<style scoped>
.textarea{height: 180rpx;padding: 8rpx 0;}
</style>
